{% extends "../main.html" %}
{% block head_js %}
<!--<link href="{{static_url('datatable/jquery.dataTables.css')}}" rel="stylesheet">-->
<!--link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"-->
<style type="text/css">
document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};
#red {color: red;}
#blue {color: blue;}
#orange {color: orange;}
#green {color: green;}
a {color: inherit;}





</style>
{% end %}

{% block bodyy %}
<!--<a href="/rsync/dir" class="btn btn-primary btn-lg btn-block">同步目录列表</a><br>-->
<!--<p class="bg-primary btn-lg">同步目录列表</p>-->
<!--<h3 class="sub-header"></h3>-->
<h3 class="sub-header" content="">目录列表</h3>

<form class="form-horizontal" method="post">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">目标机组</label>
            <div class="col-sm-11">
                <select id="mainselect" class="form-control" name="d_group" ></select>
                <!--<select id="midselect" class="form-control" name="midselect" ></select>-->
                    <!--<select id="backselect"class="form-control"  name="backselect" ></select>-->
            </div>
        </div>

        <div class="form-group">
            <label for="inputEmail3" class="col-sm-1 control-label">目标主机</label>
            <div class="col-sm-11">
                <select id="midselect" class="form-control" name="d_host" ></select>
            </div>
        </div>
    <div class="col-sm-12">
    <table id="hosts" class="table table-striped">
        <thead>
        <tr>
            <th>选择</th>
            <th>同步的目录</th>
        </tr>
        </thead>
        <tbody>
        {% for i in res %}
        <tr>
            <td><input name="filename" type="checkbox" value="{{i}}"/></td>
            <td>{{i}}</td>
        </tr>
        {% end %}

        </tbody>
    </table>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <button type="submit" name="cmd" value="rsync" class="btn btn-primary">一致性同步</button>
        <button type="submit" name="cmd" value="update_rsync" class="btn btn-danger">更新同步</button>
    </div>

</form>

{% end %}
{% block body_js %}
<script type="text/javascript">
var threeSelectData={
    //"选择频道":{
    //    val:"0",
    //    items:{
    //        "二级子菜单":{
    //            val:"0",
    //            items:{
     //               "三级子菜单":"0"
     //           }
     //       }
     //   }
    //},
    "请选择":{
        val:"0",
        items:{
            "请选择":{val:"0",items:{}},
        }
    },
    {% for i in dd %}
    {% if i %}
    "{{dd[i]['name']}}":{
        val:"{{i}}",
        items:{
            "请选择":{val:"0",items:{}},
            "All":{val:"all",items:{}},
            {% for n in dd[i]['data'] %}
            "{{n}}":{val:"{{n}}",items:{}},
            {% end %}
        }
    },
    {% end %}
    {% end %}


};

var defaults = {
    s1:'mainselect',
    s2:'midselect',
    s3:'backselect'
};

$(function(){
    threeSelect(defaults);
});

function threeSelect(config){
    var $s1=$("#"+config.s1);
    var $s2=$("#"+config.s2);
    var $s3=$("#"+config.s3);
    var v1=config.v1?config.v1:null;
    var v2=config.v2?config.v2:null;
    var v3=config.v3?config.v3:null;
    $.each(threeSelectData,function(k,v){
        appendOptionTo($s1,k,v.val,v1);
    });

    $s1.change(function(){
        $s2.html("");
        $s3.html("");
        if(this.selectedIndex==-1)
        return;

        var s1_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        appendOptionTo($s2,k,v.val,v2);
                    });
                }
            }
        });

        if($s2[0].options.length==0){
            appendOptionTo($s2,"...","",v2);
        }

        $s2.change();

    }).change();

    $s2.change(function(){
        $s3.html("");
        var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
        if(this.selectedIndex==-1)
        return;

        var s2_curr_val = this.options[this.selectedIndex].value;

        $.each(threeSelectData,function(k,v){
            if(s1_curr_val==v.val){
                if(v.items){
                    $.each(v.items,function(k,v){
                        if(s2_curr_val==v.val){
                            $.each(v.items,function(k,v){
                                appendOptionTo($s3.show(),k,v,v3);
                            });
                        }
                    });

                    if($s3[0].options.length==0){
                        appendOptionTo($s3.hide(),"...","",v3);
                    }
                }
            }
        });

    }).change();

    function appendOptionTo($o,k,v,d){

        var $opt=$("<option>").text(k).val(v);

        if(v==d){
            $opt.attr("selected", "selected")
        }
        $opt.appendTo($o);
    }

}
</script>

{% end %}
